<template>
  <el-dialog :title="title" :visible.sync="visiable" width="500px" :before-close="handleClose">
    <el-form  ref="formData" :model="formData" label-width="100px" label-position="right" style="width:400px;" status-icon>
      <el-form-item label="用户名:" prop="userName" >
        <el-input v-model="formData.userName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="性别:" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio :label="1" border>男</el-radio>
          <el-radio :label="0" border>女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input v-model="formData.email"></el-input>
      </el-form-item>
      <el-form-item label="账号锁定:" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :label="1" border>正常</el-radio>
          <el-radio :label="0" border>锁定</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary" @click="submitForm('formData')" >确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {dateFormat} from '@/utils/date';
import userApi from '@/api/user';
export default {
    props:{
        title:{
            type:String,
            default:''
        },
        visiable:{  // 弹出窗口
            type:Boolean,
            default:false
        },
        formData: { //提交表单数据
            type:Object,
            // eslint-disable-next-line vue/require-valid-default-prop
            default:{}
        },
        remoteClose: Function, //用于关闭窗口
    },
    data () {
        return {

        };
    },

    methods: {
        // 关闭窗口
        handleClose(){
            // 将表单清空
            this.$refs['formData'].resetFields();
            // 调用父组件的方法关闭窗口
            this.remoteClose();
        },

        // 提交表单
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              // 校验通过 提交表单数据
              this.submitData();
            } else {
              this.$notify.error({
                title: '错误',
                message: '还有必填项未输入！',
                duration: 1500
              });
            }
          });
        },

      // 格式化日期
      getFormat(date){
        return dateFormat(date);
      },

        async submitData() {
          let response = null;
          // 编辑
          response = await userApi.updateUserInfo(this.formData)
          if(response.code === 200){
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 1500
            });
          } else if (response.code === 306) {
            this.$notify.error({
              title: '错误',
              message: '您没有操作权限，请联系管理员',
              duration: 1500
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: '系统异常，请稍后再试',
              duration: 1500
            });
          }
          // 关闭窗口
          this.handleClose();
      },
    }
}

</script>
<style scoped>
</style>
